<template>
  <div id="app">
    <!-- <button @click="getData">获取</button>
    <ul>
      <li v-for="item in list" :key="item">{{ item }}</li>
    </ul>
    <h3 v-if="state">222222222222</h3>
    <h4 v-else>5455555555555555555</h4> -->
    <!-- 一级路由入口 -->
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      list: [],
      state: false,
    };
  },
  methods: {
    getData() {
      this.list = [11, 22, 33, 44, 55];
      this.state = true;
      //  console.log(document.querySelectorAll("li")); // 获取不到！
      // console.log(document.querySelectorAll("h3")); // 获取不到！
      this.$nextTick(() => {
        console.log(document.querySelectorAll("li")); // 等到页面渲染完成之后才获取到
        console.log(document.querySelectorAll("h3"));
      });
      // 告诫我们： 不要在赋值之后就 直接去读取DOM节点的内容
    },
  },
};
</script>

<style scoped lang="less">
.test {
  width: 375px;
  height: 100px;
  background: red;
}
</style>
